<template>
	<view class="mainbgc" v-if="pageShow">
		<header-top :messageInfo="{typeFlag:true,message:'员工工资',liner:false}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content flexleft">
					<view class="nostrongtext" @click="show=true">筛选</view>
				</view>
			</view>
		</header-top>
		<view class="mainpadding">
			<view class="flexbetween">
				<input class="input-text" type="text" placeholder="输入员工名称" v-model="keyword" confirm-type="search" @confirm="init()">
				<view class="sousuo" @click="init">搜索</view>
			</view>
			<view class="titletext margin_top flexbetween">
				<text>共计{{dataAll.total_num}}个,金额{{dataAll.total_price}}元</text>
				<text>{{search_mouth2}}</text>
			</view>
			<view class="flexcenter" v-if="!list.data.length">
				<view class="placeholderimage"></view>
			</view>
			<view class="mainpadding_top ffffff radius" style="position: relative;" v-for="item in list.data"
				:key="item.id" @click="jumpdetail(item)">
				<view class="ylable importfive flexcenter">{{item.staffbm.name}}</view>
				<view class="flexleft titletext ">
					{{item.username}}
					<view class="margin_left1 girl" v-show="item.gender==2"></view>
					<view class="margin_left1 boy" v-show="item.gender==1"></view>
				</view>
				<view class="flexbetween margin_top">
					<view class="xiaohui">职务：{{item.position_list_text}}</view>
					<view class="strongtext">￥{{item.sj_price}}</view>
				</view>
			</view>
		</view>
		
		<u-popup round="20" :show="show" @close="show=false">
			<view class="mainpadding">
				<view class="flexcenter">
					<view class="titletext">筛选</view>
				</view>
				
				<view class="flexbetween selectboxtop2 margin_top"
					@click="messageTime.timeShow=true">
					<input type="text" placeholder="点击选择月份" disabled="true" v-model="search_mouth">
					<view class="righticon2"></view>
				</view>
				<view class="flexbetween selectboxtop2 margin_top"
					@click="ckPianQuShow=true">
					<input type="text" placeholder="点击选择片区" disabled="true" v-model="ckPianQuText">
					<view class="righticon2"></view>
				</view>
				<view class="flexbetween selectboxtop2 margin_top"
					@click="ygZhiWeiShow=true">
					<input type="text" placeholder="点击选择职位" disabled="true" v-model="ygZhiWeiText">
					<view class="righticon2"></view>
				</view>
				<view class="flexbetween">
					<view class="surebtn reset flexcenter" style="margin-top: 60rpx;" @click="resetbtn">重置</view>
					<view class="surebtn flexcenter" style="margin-top: 60rpx;" @click="sureBtn">确认</view>
				</view>
			</view>
		</u-popup>
		<selectCKPianQu :message="{ckPianQuShow:ckPianQuShow}" @ckPianQuSure="ckPianQuSure"></selectCKPianQu>
		<!-- 仓库片区 -->
		<selectYGZhiWei :message="{ygZhiWeiShow:ygZhiWeiShow}" @ygZhiWeiSure="ygZhiWeiSure"></selectYGZhiWei>
		<!-- 员工职位 -->
		<timePicker :messageTime="messageTime" @timeConfirm="timeConfirm"></timePicker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				// 员工片区
				ckPianQuShow: false,
				ckPianQuText: "",
				staff_area_id: "", //员工片区id
				// 员工职位
				ygZhiWeiShow: false,
				ygZhiWeiText: "",
				position_list: "", //员工职位id
				page: 1,
				limit: 12,
				list: {
					data: [],
					total: "",
				},
				keyword: "",
				search_mouth:"",
				search_mouth2:"",
				show:false,
				messageTime:{
					timeShow:false,
					title:"选择年月",
					mode:"year-month"//date日期，datetime年月日时分秒，time时间,year-month年月
				},
				dataAll:{},
				pageShow:false
			}
		},
		onLoad() {
			let date = new Date();
			let year = date.getFullYear(); //获取当前年份
			let month = date.getMonth() - 1; //获取上一个月，需要减1
			if (month === -1) { //如果是1月份，往前推一个月就是去年的12月份
			  year--; //年数减1
			  month = 11; //12月份是11，因为是从0开始计数的
			}else{
				month++; //12月份是11，因为是从0开始计数的
			}
			if(month<9){
				month= "0"+month
			}
			this.search_mouth = year+"-"+month
			this.search_mouth2 = year+"-"+month
		},
		onShow() {
			this.init()
		},
		methods: {
			jumpdetail(item){
				if(item.staffgz){
					uni.navigateTo({
						url:"/pages/workbench/caiwu/gongzixiangqing?id="+item.staffgz.id
					})
				}
				
			},
			timeConfirm(e){
				if(e){
					this.search_mouth = e
				}
				this.messageTime.timeShow = false
			},
			ckBuMenSure(e) { //员工部门
				if (e) {
					this.ckBuMenText = e.value[0].name
					this.staff_bm_id = e.value[0].id
				}
				this.ckBuMenShow = false
			},
			ygZhiWeiSure(e) { //员工职位
				if (e) {
					this.ygZhiWeiText = e.name
					this.position_list = e.id
				}
				this.ygZhiWeiShow = false
			},
			ckPianQuSure(e) { //仓库片区
				if (e) {
					this.ckPianQuText = e.value[0].name
					this.staff_area_id = e.value[0].id
				}
				this.ckPianQuShow = false
			},
			sureBtn() {
				this.show = false
				this.search_mouth2 = this.search_mouth
				this.init()
			},
			// 重置
			resetbtn() {
				this.ckPianQuText = ""
				this.staff_area_id = ""
				this.search_mouth2 = ""
				this.ygZhiWeiText = ""
				this.position_list = ""
				this.search_mouth = ""
				this.init()
				this.show = false
			},
			getAll(){
				httpRequest.request('/dhtapi/user/staffListData', 'POST', {
					keywords: this.keyword,
					position_list: this.position_list,
					search_mouth:this.search_mouth,
					staff_area_id: this.staff_area_id,
				}, false, false, true).then(res => {
					this.dataAll = res.data
					this.pageShow = true
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			init(isPage, page) {
				let _this = this;
				this.getAll()
				httpRequest.request('/dhtapi/user/staffList', 'POST', {
					page: page || 1,
					limit: _this.limit,
					keywords: _this.keyword,
					position_list: this.position_list,
					search_mouth:this.search_mouth,
					staff_area_id: this.staff_area_id,
				}, false, false, true).then(res => {
					console.log(res, 6363);
					if (res.code == 1) {
						let resList = res.data.data;
						if (isPage == true) {
							_this.list.data = _this.list.data.concat(resList);
							// _this.list.data.push(...resList);
						} else {
							_this.list = res.data
							_this.list.data = resList;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.searchbox {
		width: 35%;
		padding: 12rpx 20rpx;
		box-sizing: border-box;
		background-color: #f3f3f3;
		border-radius: 50rpx;

		input {
			width: 80%;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
		}
	}
.surebtn {
		width: 45%;
	}

	.reset {
		background: #ebb563;
	}
	.ylable {
		position: absolute;
		right: 0rpx;
		top: 0rpx;
		padding: 10rpx 30rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		line-height: 23rpx;
		border-bottom-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}
</style>